<!--
 * @Description: 自定义确认对话框
 * @Author: wangfuwei
 * @Date: 2020-12-04 00:18:26
 * @LastEditors: wangfuwei
 * @LastEditTime: 2020-12-05 08:52:35
 * @FilePath: /horizon-frontend/src/components/Confirm/Confirm.vue
-->
<template>
  <a-modal v-model="value" @ok="ok" @cancel="onCancel" :ok-text="okText" :cancel-text="cancelText" :width="460" :keyboard="false" :maskClosable="false" ref="modal">
    <template v-slot:title>
      <div class="point"></div>
      <div>{{ title }}</div>
    </template>
    <img src="~@/assets/images/confirm.png" />
    <div class="msg">{{ content }}</div>
  </a-modal>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "操作确认",
    },
    content: {
      type: String,
      required: true,
    },
    onOk: {
      type: Function,
      /* eslint-disable-next-line */
      default: function() { },
    },
    onCancel: {
      type: Function,
      /* eslint-disable-next-line */
      default: function() { },
    },
    okText: {
      type: String,
      default: "是",
    },
    cancelText: {
      type: String,
      default: "否",
    },
  },
  data() {
    return {
      value: false,
    };
  },
  methods: {
    ok() {
      this.onOk();
      this.value = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-modal-content {
  height: 360px;
}

/deep/ .ant-modal-header {
  border-bottom: 0px;
}

/deep/ .ant-modal-footer {
  border-top: 0px;
  text-align: center;
}

/deep/ .ant-modal-body {
  text-align: center;
  padding: 12px;
}

/deep/ .ant-btn {
  width: 80px;
  border-radius: 2px;
  margin: 0 10px 20px;
}

.msg {
  padding: 30px 20px 60px;
  font-size: 18px;
  color: #828282;
  line-height: 28px;
  height: 56px;
  overflow: hidden;
  font-weight: 500;
}

.point {
  border-radius: 50% 50%;
  width: 6px;
  height: 6px;
  float: left;
  position: relative;
  left: -8px;
  top: 8px;
  background-color: #56a4ff;
}
</style>
